<template lang="pug">
div
  obj-single-select(
    :options="result",
    key="id",
    label="names",
    :update="update",
    type="selected",
    :loading="loading",
    :local-search="false",
    :search-change="search",
    :searchable="true",
    :custom-label="customLabel",
    placeholder="搜索用户",
  )
</template>

<script>
import { searchUser } from '../../vuex/action'
import ObjSingleSelect from '../select/objSingle'

export default {
  name: 'userSearch',
  components: {
    ObjSingleSelect
  },
  vuex: {
    getters: {
      result: ({ user }) => user.result,
    },
    actions: {
      searchUser,
    }
  },
  props: ['user', 'category'],
  data () {
    return {
      loading: false,
    }
  },
  methods: {
    search (q) {
      catchError(async () => {
        this.loading = true
        await this.searchUser({q, category: this.category})
        this.loading = false
      })
    },
    update(value) {
      this.user = value
    },
    customLabel ({id, names, name}) {
      return `${id}: ${!_.isEmpty(names) ? names.join(', ') : name}`
    },
  },
  created () {
  },
  computed: {
  },
  watch: {
  }
}
</script>

<style lang="sass" scoped>
</style>
